<template>
    <Transition name="zx-zoom-in-top" @after-leave="doDestroy">
        <div
            v-show="showPopper"
            class="zx-color-dropdown"
        >
            <div class="zx-color-dropdown__main-wrapper">
                <HueSlider ref="hue" :color="color" vertical style="float: right;" />
                <SvPanel ref="sl" :color="color" />
            </div>
            <AlphaSlider v-if="showAlpha" ref="alpha" :color="color" />
            <Predefine v-if="predefine" :color="color" :colors="predefine" />
            <div class="zx-color-dropdown__btns">
                <span class="zx-color-dropdown__value">
                    <ZxInput
                        v-model="customInput"
                        :validate-event="false"
                        size="mini"
                        @keyup.native.enter="handleConfirm"
                        @blur="handleConfirm"
                    />
                </span>
                <ZxButton
                    size="mini"
                    type="text"
                    class="zx-color-dropdown__link-btn"
                    @click="$emit('clear')"
                >
                    {{ t('el.colorpicker.clear') }}
                </ZxButton>
                <ZxButton
                    plain
                    size="mini"
                    class="zx-color-dropdown__btn"
                    @click="confirmValue"
                >
                    {{ t('el.colorpicker.confirm') }}
                </ZxButton>
            </div>
        </div>
    </Transition>
</template>

<script>
import SvPanel from './sv-panel';
import HueSlider from './hue-slider';
import AlphaSlider from './alpha-slider';
import Predefine from './predefine';
import Popper from '@src/utils/vue-popper';
import Locale from '@src/mixins/locale';
import ZxInput from '../../../../components/input';
import ZxButton from '../../../../components/button';

export default {
    name: 'ZxColorPickerDropdown',

    components: {
        SvPanel,
        HueSlider,
        AlphaSlider,
        ZxInput,
        ZxButton,
        Predefine,
    },

    mixins: [Popper, Locale],

    props: {
        color: {
            required: true,
        },
        showAlpha: Boolean,
        predefine: Array,
    },

    data() {
        return {
            customInput: '',
        };
    },

    computed: {
        currentColor() {
            const parent = this.$parent;
            return !parent.value && !parent.showPanelColor ? '' : parent.color.value;
        },
    },

    watch: {
        showPopper(val) {
            if (val === true) {
                this.$nextTick(() => {
                    const { sl, hue, alpha } = this.$refs;
                    sl && sl.update();
                    hue && hue.update();
                    alpha && alpha.update();
                });
            }
        },

        currentColor: {
            immediate: true,
            handler(val) {
                this.customInput = val;
            },
        },
    },

    mounted() {
        this.$parent.popperElm = this.popperElm = this.$el;
        this.referenceElm = this.$parent.$el;
    },

    methods: {
        confirmValue() {
            this.$emit('pick');
        },

        handleConfirm() {
            this.color.fromString(this.customInput);
        },
    },
};
</script>
